<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>协同办公系统</title>
        <link href="img/saas.css" rel="stylesheet" type="text/css" />
        <script src="Js/jquery.js"></script>
        <script src="Js/jquery.tab0.9.js"></script>
        <script language="JavaScript" src="Js/jquery.mask.js"></script>
      
        
    </head>
    <body>
     功能描述：
     1、支持自定义html内容
     2、支持ajax加载内容
     3、回调函数
    如果下载有问题，请加群：58875561 或者发邮件luwenpan@gmail.com
    <br />
     滑动demo
      	<div id="tab_list" style="width:700px">
				</div>
      普通demo
      	<div id="tab_list_n">
					</div>
					 Ajax demo
      	<div id="tab_list_a">
					</div>
					
					动态添加自动显示滑动 demo <input type="button" id="addTab" value="add">
      	<div id="tab_list_add">
					</div>
					
					动态添加不显示滑动 demo <input type="button" id="addTabN" value="add">
      	<div id="tab_list_addn">
					</div>
    </body>
</html>
<script>
$(function(){

	$("#tab_list").Tab({items:[
	 {title:'tab1',closed:true,icon:'',html:'test1',load:'',callback:function(){}},
	 {title:'tab22222222',closed:true,icon:'',html:'test2',load:'',callback:function(){alert('click tab2');}},
	 {title:'tab3',closed:true,icon:'',html:'test3',load:'',callback:function(){}},
	 {title:'tab4',closed:true,icon:'',html:'test4',load:'',callback:function(){}},
	 {title:'tab5',closed:true,icon:'',html:'test5',load:'',callback:function(){}},
	 {title:'tab6',closed:true,icon:'',html:'test6',load:'',callback:function(){}},
	 {title:'tab7',closed:true,icon:'',html:'test7',load:'',callback:function(){}},
	 {title:'tab8',closed:true,icon:'',html:'test8',load:'',callback:function(){}},
	 {title:'tab9',closed:true,icon:'',html:'test9',load:'',callback:function(){}},
	 {title:'tab10',closed:true,icon:'',html:'test10',load:'',callback:function(){}},
	 {title:'tab11',closed:true,icon:'',html:'test11',load:'',callback:function(){}},
	 {title:'tab12',closed:true,icon:'',html:'test12',load:'',callback:function(){}},
	 {title:'tab13',closed:true,icon:'',html:'test13',load:'',callback:function(){}},
	 {title:'tab14',closed:true,icon:'',html:'test14',load:'',callback:function(){}},
	 {title:'tab15',closed:true,icon:'',html:'test15',load:'',callback:function(){}},
	 {title:'tab16',closed:true,icon:'',html:'test16',load:'',callback:function(){}}
	],
	width:500,
	height:100,
	tabcontentWidth:500,
	tabWidth:66,
	tabHeight:25,
	tabHtml:'一般用于说明的区域 <img src="img/i_min.gif" type="min"/> <img src="img/i_normal.gif" type="normal" class=""/> <img src="img/i_max.gif" type="max" class=""/>'
	});
	$("#tab_list_n").Tab({items:[
	 {title:'tab1',closed:true,icon:'',html:'test1',load:'',callback:function(){}},
	 {title:'tab2',closed:true,icon:'',html:'test2',load:'',callback:function(){}},
	 {title:'tab3',closed:true,icon:'',html:'test3',load:'',callback:function(){}},
	 {title:'tab13',closed:true,icon:'',html:'test13',load:'',callback:function(){}},
	 {title:'tab14',closed:true,icon:'',html:'test14',load:'',callback:function(){}},
	 {title:'tab15',closed:true,icon:'',html:'test15',load:'',callback:function(){}},
	 {title:'tab16',closed:true,icon:'',html:'test16',load:'',callback:function(){}}
	],
	tabScroll:false,
	width:500,
	height:100,
	tabcontentWidth:498,
	tabWidth:66,
	tabHeight:25
	});
	$("#tab_list_a").Tab({items:[
	 {title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}},
	 {title:'tab2',closed:true,icon:'',html:'test2',load:'',callback:function(){}},
	 {title:'tab3',closed:true,icon:'',html:'test3',load:'',callback:function(){}},
	 {title:'tab13',closed:true,icon:'',html:'test13',load:'',callback:function(){}},
	 {title:'tab14',closed:true,icon:'',html:'test14',load:'',callback:function(){}},
	 {title:'tab15',closed:true,icon:'',html:'test15',load:'',callback:function(){}},
	 {title:'tab16',closed:true,icon:'',html:'test16',load:'',callback:function(){}}
	],
	tabScroll:false,
	width:500,
	height:100,
	tabcontentWidth:498,
	tabWidth:66,
	tabHeight:25
	});
	var o=$("#tab_list_add").Tab({items:[
	 {title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}}
	],
	tabScroll:false,
	width:500,
	height:100,
	tabcontentWidth:498,
	tabWidth:66,
	tabHeight:25
	});
	$('#addTab').click(function(){
		o.newTab({title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}});
	});
	var oo=$("#tab_list_addn").Tab({items:[
	 {title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}}
	],
	tabScroll:false,
	width:500,
	height:100,
	tabcontentWidth:498,
	tabWidth:66,
	tabHeight:25
	});
	$('#addTabN').click(function(){
		oo.addTab({title:'tab1',closed:true,icon:'',html:'',load:'1.html',callback:function(){}});
	});
});
</script>